<template>
  <div class="album">
    <div class="album-left">
      <!-- 左侧列表 -->
      <div class="album-container">
        <!-- 可以用排他或者是选中的标识法选中给高亮 -->
        <div class="album-title">按语言</div>
        <ul class="album-lang">
          <li class="album-item">华语</li>
          <li class="album-item">欧美</li>
          <li class="album-item">日语</li>
          <li class="album-item">韩语</li>
        </ul>
      </div>
      <div class="album-container">
        <div class="album-title">按时间</div>
        <ul class="album-time">
          <li class="album-item">全部</li>
          <li class="album-item">最近七天</li>
          <li class="album-item">最近一月</li>
          <li class="album-item">最近一季</li>
        </ul>
      </div>
    </div>
    <!-- 专辑内容 -->
    <div class="album-main">
      <div class="album-main-top">
        <div class="album-main-title">华语专辑({{ albumList.length }}张)</div>
      </div>
      <div class="album-main-container">
        <div class="album-main-wrap">
          <div
            class="album-main-item"
            v-for="album in albumList"
            :key="album.id"
          >
            <div @click="goAlbumInfo(album.id)">
              <div class="mask-img">
                <div class="album-main-mask"></div>

                <img :src="album.picUrl" class="album-main-img" alt="" />
              </div>
            </div>
            <div class="album-main-outline">
              <span class="album-main-name" @click="goAlbumInfo(album.id)">{{
                album.name
              }}</span>
              <span class="album-main-time"
                >作者: <em>{{ album.artist.name }}</em></span
              >
              <span class="album-main-share"
                >分享<em
                  class="iconfont icon-fenxiang"
                  style="color: #a0a0a0; padding-left: 5px"
                ></em
              ></span>
            </div>
            <div class="album-main-all">所有曲目</div>
          </div>

          <!-- 分页器 -->
          <div class="pages">
            <div class="pages-wrap">
              <ul class="pages-ul">
                <li class="pages-li">
                  <a href="#" class="isActive">1</a>
                </li>
                <li class="pages-li">
                  <a href="#">2</a>
                </li>
                <li class="pages-li">
                  <a href="#">3</a>
                </li>
                <li class="pages-li">
                  <a href="#">4</a>
                </li>
                <li class="pages-li">
                  <a href="#">5</a>
                </li>
                <li>
                  <a href="#" class="pages-last">下一页</a>
                </li>
                <li>
                  <a href="#" class="pages-last">尾页</a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { reqAlbumApi } from "@/api/index";

export default {
  name: "KAlbum",
  data() {
    return {
      albumList: [],
      pageNo: 1, //第几页
      limit: 10, //页大小
      total: 0,
    };
  },
  mounted() {
    this.AlbumList();
  },
  methods: {
    async AlbumList(limit) {
      const result = await reqAlbumApi(limit);
      // console.log(result);
      this.albumList = result.albums.splice(0, 10);
      this.total = result.albums.length;
    },
    goAlbumInfo(id) {
      console.log(id);
      this.$router.push({
        name: "AlbumInfo",
        query: {
          albumId: id,
        },
      });
    },
    /*   goAlbumInfo() {
      this.$router.push("/albumsInfo");
    }, */
  },
};
</script>
<style lang="less" scoped>
.album {
  margin: 10px auto;
  width: 1000px;
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}

.album-left {
  width: 210px;
  height: 530px;
  // border: 1px solid black;

  font-size: 16px;

  .album-container {
    width: 100%;
    height: 208px;
    padding-bottom: 50px;

    .album-title {
      color: #fff;
      font-size: 16px;
      width: 100%;
      height: 30px;
      line-height: 30px;
      text-align: center;
      background-color: #cfcfcf;
    }
  }
}
.album-lang {
  margin-top: 8px;
}

.album-time {
  margin-top: 8px;
}

.album-item {
  width: 100%;
  height: 36px;
  line-height: 36px;
  font-size: 14px;
  margin-bottom: 18px;
  text-align: center;
}
.album-item:hover {
  background: #85d2f2;
  color: #fff;
  cursor: pointer;
}

.active {
  background-color: #85d2f2;
}

.album-main {
  width: 770px;
  // border: 1px solid red;
  position: relative;
}
.album-main-top {
  font-size: 16px;
  width: 100%;
  height: 38px;
  line-height: 38px;
  border-bottom: 1px solid #dcdcdc;
  box-sizing: border-box;
}
.album-main-container {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.album-main-wrap {
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.album-main-item {
  width: 50%;
  display: flex;
  padding-top: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #dcdcdc;
}
.album-main-img {
  width: 100px;
  height: 100px;
}
.mask-img:hover .album-main-mask {
  display: block;
}
.mask-img {
  position: relative;
  display: block;
  float: left;
  width: 100px;
  height: 119px;
  background: url("./images/other.png") no-repeat -119px -412px;
}
.album-main-mask {
  display: none;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100px;
  height: 100px;
  background-color: rgba(0, 0, 0, 0.4);
  border: 3px solid #1c60bd;
  box-sizing: border-box;
}

.album-main-outline {
  width: 180px;
  margin-left: 10px;
}
.album-main-name {
  display: block;
  font-size: 14px;
  margin-bottom: 8px;
}
.album-main-name:hover {
  color: #6fcef4;
}
.album-main-time {
  display: block;
  color: #a0a0a0;
  margin: 8px 0;
}

.album-main-share {
  display: block;
  align-content: center;
  margin: 8px 0;
}
.album-main-all {
  text-align: center;
  display: flex;
  flex: 1;
  align-self: center;
  color: #a0a0a0;
}

/* 分页器 */
.pages {
  width: 100%;
}
.pages-wrap {
  width: 770px;
}
.pages-ul {
  margin: 0 auto;
  margin-top: 25px;
  margin-bottom: 5px;
  width: 220px;
  height: 40px;
  line-height: 40px;
  display: flex;
}
.pages-li {
  margin: 0 6px;
  font-size: 14px;
  font-style: italic;
}
.pages-li:hover a {
  text-decoration: none;
}
.pages-last {
  font-size: 12px;
  font-style: normal;
}
.isActive {
  font-weight: 600;
  border-bottom: 1px solid #ccc;
}
</style>
